<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>核心业务 - 甄成集团</title>
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/common.css">
  <!-- 字体图标库 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <style>
    :root {
      --primary-color: #3c71f6;
      --text-color: #181b31;
      --secondary-color: #8F93B0;
      --light-color: #B9BCCD;
      --transition-speed: 0.3s;
    }

    body {
      background: #fff;
      overflow-x: hidden;
    }

    .core-business-main {
      padding: 6rem 1rem;
      background: url('images/icons/bg_hx.png') no-repeat fixed center center;
      background-size: contain;
    }

    .core-business-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      gap: 10rem 12.5rem;
      max-width: 100rem;
      margin: 0 auto;
      position: relative;
      padding: 0 1rem;

    }

    /* 十字分割线 */
    .core-business-grid::before {
      content: '';
      position: absolute;
      background: #e9ecf2;
      z-index: 1;
      left: 50%;
      top: 0;
      width: 1px;
      height: 100%;
      transform: translateX(-0.5px);
      transition: opacity var(--transition-speed);
    }

    .horizontal-line {
      position: absolute;
      background: #e9ecf2;
      z-index: 1;
      left: 0;
      margin-top: 5rem;
      width: 100%;
      height: 1px;
      transform: translateY(-0.5px);
      transition: opacity var(--transition-speed);
    }

    .core-business-block {
      background: transparent;
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      height: auto;
      opacity: 0;
      transform: translateY(2rem);
      transition: all var(--transition-speed);
    }

    .core-business-block.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .block-en-title {
      position: relative;
      color: transparent;
      -webkit-text-stroke: 0.0625rem var(--light-color);
      text-stroke: 0.0625rem var(--secondary-color);
      line-height: 1.2;
      user-select: none;
      margin-bottom: 0.5rem;
      font-weight: 700;
      font-size: 2.5rem;
      transition: all var(--transition-speed);
    }

    .block-en-title::before {
      content: attr(data-text);
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 100%;
      color: #B9BCCD;
      /* 填充颜色 */
      overflow: hidden;
      white-space: nowrap;
      transition: width var(--transition-speed) ease;
      -webkit-text-stroke: 0;
      /* 移除描边 */
      text-stroke: 0;
    }

    .core-business-block:hover .block-en-title::before {
      width: 100%;
      /* 从左到右填充 */
    }

    .block-header {
      /* display: flex; */
      /* align-items: flex-end;
            margin-bottom: 1rem; */
      /* gap: 0.5rem; */
    }

    .block-num {
      font-weight: 700;
      font-size: 3rem;
      line-height: 4.125rem;
      color: var(--primary-color);
      display: flex;
      margin-bottom: 0.4375rem;
      transition: color var(--transition-speed);
    }

    .block-title {
      color: var(--text-color);
      font-size: 1.875rem;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: 0;
      display: flex;
      margin-bottom: 1.3125rem;
      transition: color var(--transition-speed);
    }

    .block-section-title {
      font-family: "Microsoft YaHei Bold";
      font-weight: 700;
      font-size: 1.5rem;
      line-height: 1.3;
      color: var(--text-color);
      margin-bottom: 0.5rem;
      transition: color var(--transition-speed);
    }

    .block-desc {
      font-weight: 400;
      font-size: 1.125rem;
      line-height: 1.5;
      color: #666;
      opacity: 0.8;
      margin-bottom: 1.5rem;
      transition: opacity var(--transition-speed);
    }

    .core-business-header {
      background: url('images/icons/bg_core.jpg') no-repeat center center;
      background-size: cover;

    }



    /* 响应式设计 */
    @media screen and (max-width: 1200px) {
      .core-business-grid {
        gap: 6rem 8rem;
        padding: 0 2rem;

      }

      .block-en-title {
        font-size: 2rem;
      }

      .block-num {
        font-size: 2.5rem;
      }


    }

    @media screen and (max-width: 992px) {
      .core-business-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
      }

      .core-business-grid::before {
        display: none;
      }

      .horizontal-line {
        display: none;
      }

      .core-business-block {
        max-width: 40rem;
        margin: 0 auto;
      }
    }

    @media screen and (max-width: 768px) {
      .core-business-header {
        background: url('images/icons/bg_mini_core.jpg') no-repeat center right;
        background-size: cover;

      }

      .core-business-main {
        padding: 3rem 1.5rem;
      }

      .core-business-block {
        border-bottom: 1px solid #eee;
      }

      .core-business-grid {
        padding: 0;
        gap: 1.5rem;
      }

      .block-en-title {
        font-size: 1.7rem;
      }

      .block-num {
        font-size: 3rem;
        line-height: 3.5rem;
      }

      .block-title {
        font-size: 1.25rem;
      }

      .block-section-title {
        font-size: 1.25rem;
      }

      .block-desc {
        font-size: 1rem;
      }
    }
  </style>
</head>

<body>
  <!-- 导航栏组件 -->
  <div id="navbar"></div>
  <!-- 顶部大图与面包屑 -->
  <section class="core-business-header header">
    <div class="header-content">
      <div class="page-info">
        <h2>核心业务</h2>
        <p>CORE BUSINESS</p>
        <div class="breadcrumb">
          <span>您的位置:</span>
          <a href="index.php">首页</a>
          <span>/</span>
          <span>核心业务</span>
        </div>
      </div>
    </div>
  </section>
  <!-- 主体内容 -->
  <main class="core-business-main">
    <div class="core-business-grid">
      <div class="horizontal-line"></div>
      <!-- 01. 企业资本服务 -->
      <div class="core-business-block">
        <div class="block-en-title" data-text="ENTERPRISE CAPITAL SERVICES">ENTERPRISE CAPITAL SERVICES</div>
        <div class="block-header">
          <span class="block-num">01.</span>
          <span class="block-title">企业资本服务</span>
        </div>
        <div class="block-section-title">搭建私域会员制投融资平台</div>
        <div class="block-desc">
            公司一方面不断寻找优质的投资类项目，另一方面整合高净值的个人投资人和机构投资人成为公司投资俱乐部的成员，搭建了项目投融资的平台。甄成的项目都是经过严格的筛选或优质投资机构的推荐，甄成投资平台的会员将获得有关项目完整和深入的信息，以作为投资判断的依据。甄成的目的就是让优质的企业不要被埋没，让普通的投资人也能接触到优质的投资项目。
        </div>
        <div class="block-section-title">优质项目直投</div>
        <div class="block-desc">对于优质的项目，甄成集团也会和其他投资机构一起进行直接投资，进行领投或参投。</div>
      </div>
      <!-- 02. 新媒体运营和广告推广服务 -->
      <div class="core-business-block">
        <div class="block-en-title" data-text="MEDIA AND ADVERTISING">MEDIA AND ADVERTISING</div>
        <div class="block-header">
          <span class="block-num">02.</span>
          <span class="block-title">新媒体运营和广告推广服务</span>
        </div>
        <div class="block-section-title">独立IP运营</div>
        <div class="block-desc">甄成集团将围绕商业、创投和企业管理等领域建立知识账号（包括但不限于短视频和直播账号、微信公众号等），通过专业人士讲述、创业者和投资人采访、知名管理专家分享等方式向创业者、投资人、企业管理者等大众群体进行知识分享，也帮助创业者、投资机构等进行宣传推广，实现互助多赢。</div>
        <div class="block-section-title">新媒体运营服务</div>
        <div class="block-desc">甄成集团通过旗下子公司为企业客户提供账号运营、脚本策划、内容拍摄、剪辑、数据分析、广告投放推广、流量合作、舆情监测与管理等方面的服务。帮助企业达到提升品牌影响力，提高市场销售等方面的目标。</div>
      </div>
      <!-- 03. 连锁品牌孵化与运营 -->
      <div class="core-business-block">
            <div class="block-en-title" data-text="INCUBATION AND OPERATION">INCUBATION AND OPERATION</div>
            <div class="block-header">
          <span class="block-num">03.</span>
          <span class="block-title">连锁品牌孵化与运营</span>
        </div>
        <div class="block-section-title">品牌定位与策划</div>
        <div class="block-desc">深入分析市场趋势和消费者需求，制定精准的品牌定位策略。</div>
        <div class="block-section-title">供应链优化</div>
        <div class="block-desc">优化供应链管理，降低成本，提高效率，确保产品和服务的高品质。</div>
        <div class="block-section-title">门店标准化输出</div>
        <div class="block-desc">制定标准化的门店运营流程，确保品牌的一致性和可复制性。</div>
        <div class="block-section-title">阶梯式孵化服务</div>
        <div class="block-desc">单店盈利模型建设---区域模型验证---全国拓展落地，实现品牌的规模化发展。</div>
        <div class="block-section-title">品牌IP打造</div>
        <div class="block-desc">依托垂直领域经验，打造具有市场竞争力的连锁品牌IP。在连锁品牌服务业务方面，甄成集团创新性提出“按效果付费”的理念，与项目客户形成利益绑定、共同成长的关系，同时这也对甄成集团对于合作项目的挑选更加精益求精，切实保证客户以及各方面合作者的利益。</div>
      </div>
      <!-- 04. 企业价值提升综合服务 -->
      <div class="core-business-block">
        <div class="block-en-title" data-text="ENHANCING ENTERPRISE VALUE">ENHANCING ENTERPRISE VALUE</div>
        <div class="block-header">
          <span class="block-num">04.</span>
          <span class="block-title">企业价值提升综合服务</span>
        </div>
        <div class="block-section-title">企业管理培训与咨询</div>
        <div class="block-desc">
            甄成集团除自己的专长领域以外，还与多家企业培训与咨询的机构合作，为企业提供专业的培训和咨询服务，提升企业家、管理层以及员工的思维和能力，帮助企业优化管理结构、模式和工具。</div>
        <div class="block-section-title">技术服务</div>
        <div class="block-desc">甄成集团与多家AI人工智能、数字化系统和解决方案公司合作，为企业客户提供技术支持，解决企业发展过程中遇到的技术难题。</div>
        <div class="block-section-title">政府和产业园区合作</div>
        <div class="block-desc">一方面甄成正在为地方政府带来优质的项目入驻，带动当地的税收和经济发展；另一方面甄成也与各个政府产业投资基金合作，帮他们寻找优质的投资项目；同时甄成也在开展与各产业园区和协会合作，为产业园区以及各行业协会的优质项目进行赋能。</div>
        <div class="block-section-title">高效合作</div>
        <div class="block-desc">在国家积极推动大学生创业，连续多年举办互联网创业大赛的背景下，甄成集团也在推动高校的紧密合作、为大学生创业、高校科研机构科技成果转化提供帮助。
        </div>
      </div>
    </div>
  </main>
  <!-- 页脚组件 -->
  <div id="footer"></div>
  <script src="js/loadComponents.js"></script>
  <script>
    // 动态调整横线位置
    function adjustHorizontalLine () {
      const blocks = document.querySelectorAll('.core-business-block');
      if (blocks.length >= 2) {
        const firstBlock = blocks[0];
        const secondBlock = blocks[1];
        const maxHeight = Math.max(firstBlock.offsetHeight, secondBlock.offsetHeight);
        const horizontalLine = document.querySelector('.horizontal-line');
        if (horizontalLine) {
          horizontalLine.style.top = `${maxHeight}px`;
        }
      }
    }

    // 滚动动画
    function handleScrollAnimation () {
      const blocks = document.querySelectorAll('.core-business-block');
      blocks.forEach(block => {
        const blockTop = block.getBoundingClientRect().top;
        const windowHeight = window.innerHeight;
        if (blockTop < windowHeight * 0.8) {
          block.classList.add('visible');
        }
      });
    }

    // 页面加载完成后执行
    window.addEventListener('load', () => {
      adjustHorizontalLine();
      handleScrollAnimation();
    });

    // 窗口大小改变时重新计算
    window.addEventListener('resize', () => {
      adjustHorizontalLine();
    });

    // 滚动时检查动画
    window.addEventListener('scroll', handleScrollAnimation);
  </script>
</body>

</html>

</html>